<template>
  <main class="recruiter-page">
    <section class="hero">
      <div class="hero-left">
        <h1 class="title">高效招聘，从这里开始</h1>
        <p class="subtitle">一键发布职位、智能推荐候选人、在线沟通更便捷。</p>
        <div class="hero-actions">
          <el-button type="primary" size="large">发布职位</el-button>
          <el-button size="large">创建公司主页</el-button>
        </div>
        <div class="stats">
          <div class="stat-item">
            <div class="num">28</div>
            <div class="txt">待处理简历</div>
          </div>
          <div class="stat-item">
            <div class="num">6</div>
            <div class="txt">在招职位</div>
          </div>
          <div class="stat-item">
            <div class="num">14</div>
            <div class="txt">今日沟通</div>
          </div>
        </div>
      </div>
      <div class="hero-right">
        <div class="kpis">
          <div class="kpi">
            <span class="kpi-label">职位曝光</span>
            <span class="kpi-value">12.4k</span>
          </div>
          <div class="kpi">
            <span class="kpi-label">投递转化</span>
            <span class="kpi-value">7.8%</span>
          </div>
          <div class="kpi">
            <span class="kpi-label">平均反馈</span>
            <span class="kpi-value">2.1h</span>
          </div>
        </div>
      </div>
    </section>

    <section class="content">
      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">在招职位</div>
          <el-button type="success" plain size="small">新建职位</el-button>
        </div>
        <div class="jobs-list">
          <div v-for="j in jobs" :key="j.id" class="job-item">
            <div class="job-main">
              <div class="job-title">{{ j.title }}</div>
              <div class="job-salary">{{ j.salary }}</div>
            </div>
            <div class="job-sub">
              <span>{{ j.city }}</span>
              <span>·</span>
              <span>{{ j.exp }}</span>
              <span>·</span>
              <span>{{ j.edu }}</span>
            </div>
            <div class="job-actions">
              <el-button size="small">编辑</el-button>
              <el-button size="small" type="primary">刷新</el-button>
              <el-button size="small" type="danger" plain>下线</el-button>
            </div>
          </div>
        </div>
      </div>

      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">推荐候选人</div>
          <el-button size="small">筛选条件</el-button>
        </div>
        <div class="cands-grid">
          <div v-for="c in candidates" :key="c.id" class="cand-card">
            <div class="cand-top">
              <img :src="c.avatar" class="avatar" alt="avatar" />
              <div class="info">
                <div class="name">{{ c.name }}</div>
                <div class="meta">{{ c.title }} · {{ c.yoe }}年 · {{ c.city }}</div>
              </div>
              <div class="match">匹配度 {{ c.match }}%</div>
            </div>
            <div class="skills">
              <span v-for="s in c.skills" :key="s" class="tag">{{ s }}</span>
            </div>
            <div class="cand-actions">
              <el-button type="primary" size="small">发起沟通</el-button>
              <el-button size="small" plain>查看简历</el-button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  <footer class="footer">
    <div class="inner">
      <span>© 2025 BOSS直聘 · 招聘者工作台</span>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'RecruiterView',
  data() {
    return {
      jobs: [
        { id: 1, title: '前端工程师', salary: '15-25K', city: '北京·海淀', exp: '3-5年', edu: '本科' },
        { id: 2, title: 'Java工程师', salary: '18-28K', city: '上海·浦东', exp: '3-5年', edu: '本科' },
        { id: 3, title: '测试开发工程师', salary: '14-22K', city: '深圳·南山', exp: '2-3年', edu: '本科' },
        { id: 4, title: '产品经理', salary: '20-30K', city: '杭州·滨江', exp: '3-5年', edu: '本科' },
      ],
      candidates: [
        { id: 'c1', name: '张三', title: '前端工程师', yoe: 4, city: '北京', match: 92, avatar: '/upload/img.png', skills: ['Vue3', 'TypeScript', 'Vite'] },
        { id: 'c2', name: '李四', title: '后端工程师', yoe: 5, city: '上海', match: 88, avatar: '/upload/img_1.png', skills: ['Spring Boot', 'MySQL', 'Redis'] },
        { id: 'c3', name: '王五', title: '测试开发', yoe: 3, city: '深圳', match: 85, avatar: '/upload/img_2.png', skills: ['自动化', 'Playwright', 'CI/CD'] },
        { id: 'c4', name: '赵六', title: '产品经理', yoe: 6, city: '杭州', match: 81, avatar: '/upload/img_3.png', skills: ['需求分析', 'Axure', '数据驱动'] },
      ],
    }
  }
}
</script>

<style scoped>
.recruiter-page { width: 80%; margin: 0 auto; padding: 24px 0 60px 0; }

.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: 24px; }
.hero-left { background: #fff; border: 1px solid #f0f0f0; border-radius: 8px; padding: 24px; }
.title { font-size: 28px; font-weight: 700; color: #333; }
.subtitle { color: #666; margin-top: 6px; }
.hero-actions { display: flex; gap: 12px; margin-top: 16px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.stat-item { background: #f7fffc; border: 1px solid #e3fbf3; border-radius: 8px; padding: 12px; text-align: center; }
.num { font-weight: 700; color: #00c293; font-size: 20px; }
.txt { color: #666; margin-top: 4px; }

.hero-right { background: #fff; border: 1px solid #f0f0f0; border-radius: 8px; padding: 16px; display: flex; align-items: center; justify-content: center; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.kpi { background: #fafafa; border: 1px dashed #eee; border-radius: 8px; padding: 16px; display: flex; align-items: center; justify-content: space-between; }
.kpi-label { color: #666; }
.kpi-value { color: #333; font-weight: 700; }

.content { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
.panel { background: #fff; border: 1px solid #f0f0f0; border-radius: 8px; padding: 16px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-title { font-size: 18px; font-weight: 700; color: #333; }

.jobs-list { display: grid; gap: 12px; }
.job-item { border: 1px solid #f5f5f5; border-radius: 8px; padding: 12px; }
.job-main { display: flex; align-items: center; justify-content: space-between; }
.job-title { color: #333; font-weight: 600; }
.job-salary { color: #ff4d4f; font-weight: 700; }
.job-sub { color: #999; display: flex; gap: 8px; margin-top: 6px; }
.job-actions { margin-top: 10px; display: flex; gap: 8px; }

.cands-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cand-card { border: 1px solid #f5f5f5; border-radius: 8px; padding: 12px; background: #fff; }
.cand-top { display: flex; align-items: center; gap: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.info { display: flex; flex-direction: column; gap: 2px; }
.name { color: #333; font-weight: 700; }
.meta { color: #999; font-size: 12px; }
.match { margin-left: auto; color: #00c293; font-weight: 700; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tag { font-size: 12px; color: #666; background: #f6f6f6; padding: 2px 6px; border-radius: 3px; }
.cand-actions { margin-top: 10px; display: flex; gap: 8px; }

.footer { background: #2b2d2f; color: #cfd3dc; }
.inner { width: 80%; margin: 0 auto; padding: 16px 0; text-align: center; }
</style>


